<template>
  <div class="example2">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>

    <div class="border">
      <a href="JavaScript:;" class="look-code" @click="lookCode('digitCard')"
        >代码</a
      >
      <data-v-dropdown
        dropType="1"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="2"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
        style="margin-left: 10px"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="3"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="4"
        :list="list"
        valueKey="value"
        nameKey="name"
        style="margin-left: 10px"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="5"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="6"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
        style="margin-left: 10px"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="7"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="8"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
        style="margin-left: 10px"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="9"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="10"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
        style="margin-left: 10px"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="11"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="12"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
        style="margin-left: 10px"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="13"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="14"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
        style="margin-left: 10px"
      >
      </data-v-dropdown>
    </div>
    <div class="border">
      <data-v-dropdown
        dropType="15"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="16"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
        style="margin-left: 10px"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="17"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="18"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
        style="margin-left: 10px"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="19"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
      >
      </data-v-dropdown>
      <data-v-dropdown
        dropType="20"
        :list="list"
        valueKey="value"
        nameKey="name"
        @change="dropChange1"
        style="margin-left: 10px"
      >
      </data-v-dropdown>
    </div>
    <div class="border">
      <a href="JavaScript:;" class="look-code" @click="lookCode('segment')"
        >代码</a
      >
      <data-v-segment
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
      <data-v-segment
        :dropType="2"
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
      <data-v-segment
        :dropType="3"
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
      <data-v-segment
        :dropType="4"
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
      <data-v-segment
        :dropType="5"
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
      <data-v-segment
        :dropType="6"
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
      <data-v-segment
        :dropType="7"
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
      <data-v-segment
        :dropType="8"
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
      <data-v-segment
        :dropType="9"
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
      <data-v-segment
        :dropType="10"
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
      <data-v-segment
        :dropType="11"
        :list="options"
        keyName="name"
        defaultIndex="1"
        @customClick="myClick"
      >
      </data-v-segment>
    </div>
    <div class="border">
      <data-v-subPanel
        :subType="1"
        :list="list"
        keyName="name"
        valueName="value"
      >
      </data-v-subPanel>
      <data-v-subPanel
        :subType="2"
        :list="list"
        keyName="name"
        valueName="value"
        style="margin-left: 10px"
      >
      </data-v-subPanel>
      <data-v-subPanel
        :subType="3"
        :list="list"
        keyName="name"
        valueName="value"
      >
      </data-v-subPanel>
      <data-v-subPanel
        :subType="4"
        :list="list"
        keyName="name"
        valueName="value"
        style="margin-left: 20px"
      >
      </data-v-subPanel>
      <data-v-subPanel
        :subType="5"
        :list="list"
        keyName="name"
        valueName="value"
      >
      </data-v-subPanel>
      <data-v-subPanel
        :subType="6"
        :list="list"
        keyName="name"
        valueName="value"
        style="margin-left: 10px"
      >
      </data-v-subPanel>
      <data-v-subPanel
        :subType="7"
        :list="list"
        keyName="name"
        valueName="value"
      >
      </data-v-subPanel>
      <data-v-subPanel
        :subType="8"
        :list="list"
        keyName="name"
        valueName="value"
        style="margin-left: 10px"
      >
      </data-v-subPanel>
      <data-v-subPanel
        :subType="9"
        :list="list"
        keyName="name"
        valueName="value"
      >
      </data-v-subPanel>
      <data-v-subPanel
        :subType="10"
        :list="list"
        keyName="name"
        valueName="value"
        style="margin-left: 10px"
      >
      </data-v-subPanel>
    </div>
    <go-home></go-home>
  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";
export default {
  name: "example5",
  components: {
    CodeContainer,
  },
  data() {
    return {
      isShowCode: false,
      options: [{ name: "今日" }, { name: "近一周" }, { name: "近一月" }],
      list: [
        {
          name: "test1",
          value: 1,
        },
        {
          name: "test2",
          value: 2,
        },
        {
          name: "test3",
          value: 3,
        }
      ],
    };
  },
  methods: {
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then((res) => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    },
    myClick() {
      console.log(12313);
    },
    dropChange1({ value, index }) {
      console.log("value" + value + "index" + index);
    },
  },
  mounted() {
    let count = 0;
    setInterval(() => {
      if (count >= 100) {
        count = 0;
      }
      count++;
      this.count = count;
    }, 100);
  },
};
</script>
<style scoped>
.example2 {
  padding: 5px;
  height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  background: #000 url(./example1-img/gridBg.png);
}

.border {
  padding: 10px;
  border: 1px solid #5e6163;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  flex-flow: row wrap;
  margin-left: 10px;
  margin-bottom: 5px;
  width: calc(20% - 10px);
  justify-content: center;
}

.border::-webkit-scrollbar {
  display: none;
}

.border a {
  text-align: right;
  display: inline-block;
  width: 100%;
  color: #5e6163 !important;
  font-size: 13px;
  margin-bottom: 5px;
}
.border a:hover {
  color: rgba(10, 175, 252, 0.952) !important;
}

.customName {
  color: red;
}
.custom-class .main-text {
  color: red;
}
.custom-class3 .main-text {
  font-size: 15px !important;
  margin-top: -3px;
}
.digitPanel1 {
  width: 70px !important;
}
.digitPanel2 .container-body {
  background-image: linear-gradient(to bottom, #edb462, #da6d1d);
}

.digitPanel2 .container-subtitle,
.digitPanel2 .container-title {
  color: #0b1d2a;
}
.digitPanel3 .container-body {
  background-image: linear-gradient(to bottom, #30c0e5, #078ad8);
}
.digitPanel3 .container-subtitle,
.digitPanel3 .container-title {
  color: #0b1d2a;
}
</style>
